import React from 'react';
import { Provider } from 'react-redux';
import { SnapUISelector } from './snap-ui-selector';
import { Box, Text } from '../../../component-library';
import {
  Display,
  FlexDirection,
  JustifyContent,
} from '../../../../helpers/constants/design-system';
import { shortenAddress } from '../../../../helpers/utils/util';
import { SnapUICard } from '../snap-ui-card/snap-ui-card';
import configureStore from '../../../../store/store';
import testData from '../../../../../.storybook/test-data';
import { SnapInterfaceContextProvider } from '../../../../contexts/snaps';

const store = configureStore(testData);

export default {
  title: 'Components/App/Snaps/SnapUISelector',
  component: SnapUISelector,
  argTypes: {},
  decorators: [
    (story) => (
      <Provider store={store}>
        <SnapInterfaceContextProvider
          snapId={'npm:fooSnap'}
          interfaceId={'foo'}
          initialState={{ 'selector': 'foo' }}
          context={{}}
        >
          {story()}
        </SnapInterfaceContextProvider>
      </Provider>
    ),
  ],
};

export const DefaultStory = (args) => <SnapUISelector name='selector' {...args} />;

DefaultStory.storyName = 'Default';

DefaultStory.args = {
  options: ['foo', 'bar'],
  optionComponents: [
    <Box>
      <Text>Foo</Text>
    </Box>,
    <Box>
      <Text>Bar</Text>
    </Box>,
  ],
};

export const AdvancedStory = (args) => <SnapUISelector name='selector' {...args} />;

AdvancedStory.storyName = 'Advanced';

AdvancedStory.args = {
  options: ['foo', 'bar'],
  optionComponents: [
    <Box display={Display.Flex} justifyContent={JustifyContent.spaceBetween}>
      <Box display={Display.Flex} flexDirection={FlexDirection.Column}>
        <Text>Account 1</Text>
        <Text>
          {shortenAddress('0xc0ffee254729296a45a3885639AC7E10F9d54979')}
        </Text>
      </Box>
      <Box display={Display.Flex} flexDirection={FlexDirection.Column}>
        <Text>3000 USD</Text>
        <Text>1 ETH</Text>
      </Box>
    </Box>,
    <Box display={Display.Flex} justifyContent={JustifyContent.spaceBetween}>
      <Box display={Display.Flex} flexDirection={FlexDirection.Column}>
        <Text>Account 2</Text>
        <Text>
          {shortenAddress('0xc0ffee254729296a45a3885639AC7E10F9d54979')}
        </Text>
      </Box>
      <Box display={Display.Flex} flexDirection={FlexDirection.Column}>
        <Text>0 USD</Text>
        <Text>0 ETH</Text>
      </Box>
    </Box>,
  ],
};

export const CardStory = (args) => <SnapUISelector name='selector' {...args} />;

CardStory.storyName = 'Card';

CardStory.args = {
  options: ['foo', 'bar'],
  optionComponents: [
    <SnapUICard
      image={`<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><rect width="100%" height="100%" fill="#DDDDDD"/><path fill="#999999" d="m6.6 15.11-.39-.07q.04-.31.17-.55.13-.23.32-.39.2-.16.45-.24.25-.08.53-.08.31 0 .55.09.24.09.41.24.17.15.26.35.09.21.09.44 0 .21-.04.37-.05.15-.14.27-.08.12-.21.2-.13.08-.29.14.39.12.58.37.19.25.19.63 0 .33-.12.58-.12.24-.32.41-.21.17-.48.26-.26.09-.57.09-.32 0-.56-.08-.25-.07-.43-.22t-.3-.36q-.13-.21-.22-.49l.33-.14q.13-.05.24-.02.11.02.16.12l.12.2q.07.11.15.19.09.07.22.12.12.05.29.05.19 0 .33-.06t.23-.16q.1-.1.14-.22.05-.12.05-.24 0-.16-.03-.29-.04-.12-.14-.21-.11-.09-.3-.15-.2-.05-.53-.05v-.52q.27-.01.45-.06.18-.04.29-.13.11-.08.15-.2.04-.12.04-.27 0-.3-.17-.46-.17-.16-.46-.16-.13 0-.24.04-.11.03-.2.1-.09.07-.15.16t-.09.2q-.05.13-.13.18-.08.04-.23.02Zm4.59 2.37h1.12q.12 0 .19.07.07.06.07.18v.44H9.59v-.25q0-.07.03-.15.03-.09.1-.15l1.32-1.32q.16-.17.29-.32.14-.16.22-.31.09-.15.14-.3.04-.16.04-.33 0-.15-.04-.27-.05-.12-.13-.2-.08-.08-.2-.12-.11-.04-.26-.04-.13 0-.24.04-.11.03-.2.1-.09.07-.15.16t-.09.2q-.05.13-.13.18-.08.04-.23.02l-.39-.07q.04-.31.17-.55.13-.23.32-.39.2-.16.45-.24.25-.08.53-.08.3 0 .55.09.25.09.43.25t.28.39q.09.23.09.51 0 .24-.07.44-.07.21-.19.39-.11.19-.27.36-.16.18-.34.36l-.97 1q.14-.05.28-.07.14-.02.26-.02Zm6.27-.3-.4.38-1.01-1.01-1.03 1.02-.39-.39 1.02-1.03-.97-.97.39-.39.97.97.98-.97.39.39-.97.98 1.02 1.02Zm2.49-2.07-.39-.07q.05-.31.18-.55.13-.23.32-.39t.44-.24q.25-.08.54-.08.3 0 .54.09.24.09.42.24.17.15.26.35.09.21.09.44 0 .21-.05.37-.04.15-.13.27-.09.12-.22.2-.13.08-.29.14.39.12.58.37.2.25.2.63 0 .33-.12.58-.12.24-.33.41-.2.17-.47.26-.27.09-.57.09-.33 0-.57-.08-.24-.07-.42-.22t-.31-.36q-.12-.21-.21-.49l.32-.14q.13-.05.24-.02.12.02.17.12.05.1.12.2.06.11.15.19.09.07.21.12.12.05.29.05.19 0 .33-.06t.24-.16q.09-.1.14-.22.05-.12.05-.24 0-.16-.04-.29-.03-.12-.14-.21-.1-.09-.3-.15-.19-.05-.52-.05v-.52q.27-.01.45-.06.18-.04.29-.13.1-.08.14-.2.05-.12.05-.27 0-.3-.17-.46-.18-.16-.46-.16-.13 0-.24.04-.11.03-.2.1-.09.07-.15.16t-.09.2q-.05.13-.14.18-.08.04-.23.02Zm4.6 2.37h1.11q.12 0 .19.07.07.06.07.18v.44h-2.97v-.25q0-.07.03-.15.03-.09.1-.15l1.32-1.32q.16-.17.29-.32.13-.16.22-.31t.13-.3q.05-.16.05-.33 0-.15-.05-.27-.04-.12-.12-.2-.09-.08-.2-.12-.12-.04-.26-.04-.13 0-.25.04-.11.03-.2.1-.08.07-.14.16-.06.09-.09.2-.05.13-.13.18-.09.04-.24.02l-.39-.07q.05-.31.18-.55.12-.23.32-.39.19-.16.44-.24.25-.08.54-.08.3 0 .55.09.25.09.43.25.17.16.27.39t.1.51q0 .24-.07.44-.07.21-.19.39-.12.19-.28.36-.16.18-.33.36l-.98 1q.14-.05.28-.07.14-.02.27-.02Z"/></svg>`}
      title="Title"
      description="Description"
      value="Value"
      extra="Extra"
    />,
    <SnapUICard
      image={`<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><rect width="100%" height="100%" fill="#DDDDDD"/><path fill="#999999" d="m6.6 15.11-.39-.07q.04-.31.17-.55.13-.23.32-.39.2-.16.45-.24.25-.08.53-.08.31 0 .55.09.24.09.41.24.17.15.26.35.09.21.09.44 0 .21-.04.37-.05.15-.14.27-.08.12-.21.2-.13.08-.29.14.39.12.58.37.19.25.19.63 0 .33-.12.58-.12.24-.32.41-.21.17-.48.26-.26.09-.57.09-.32 0-.56-.08-.25-.07-.43-.22t-.3-.36q-.13-.21-.22-.49l.33-.14q.13-.05.24-.02.11.02.16.12l.12.2q.07.11.15.19.09.07.22.12.12.05.29.05.19 0 .33-.06t.23-.16q.1-.1.14-.22.05-.12.05-.24 0-.16-.03-.29-.04-.12-.14-.21-.11-.09-.3-.15-.2-.05-.53-.05v-.52q.27-.01.45-.06.18-.04.29-.13.11-.08.15-.2.04-.12.04-.27 0-.3-.17-.46-.17-.16-.46-.16-.13 0-.24.04-.11.03-.2.1-.09.07-.15.16t-.09.2q-.05.13-.13.18-.08.04-.23.02Zm4.59 2.37h1.12q.12 0 .19.07.07.06.07.18v.44H9.59v-.25q0-.07.03-.15.03-.09.1-.15l1.32-1.32q.16-.17.29-.32.14-.16.22-.31.09-.15.14-.3.04-.16.04-.33 0-.15-.04-.27-.05-.12-.13-.2-.08-.08-.2-.12-.11-.04-.26-.04-.13 0-.24.04-.11.03-.2.1-.09.07-.15.16t-.09.2q-.05.13-.13.18-.08.04-.23.02l-.39-.07q.04-.31.17-.55.13-.23.32-.39.2-.16.45-.24.25-.08.53-.08.3 0 .55.09.25.09.43.25t.28.39q.09.23.09.51 0 .24-.07.44-.07.21-.19.39-.11.19-.27.36-.16.18-.34.36l-.97 1q.14-.05.28-.07.14-.02.26-.02Zm6.27-.3-.4.38-1.01-1.01-1.03 1.02-.39-.39 1.02-1.03-.97-.97.39-.39.97.97.98-.97.39.39-.97.98 1.02 1.02Zm2.49-2.07-.39-.07q.05-.31.18-.55.13-.23.32-.39t.44-.24q.25-.08.54-.08.3 0 .54.09.24.09.42.24.17.15.26.35.09.21.09.44 0 .21-.05.37-.04.15-.13.27-.09.12-.22.2-.13.08-.29.14.39.12.58.37.2.25.2.63 0 .33-.12.58-.12.24-.33.41-.2.17-.47.26-.27.09-.57.09-.33 0-.57-.08-.24-.07-.42-.22t-.31-.36q-.12-.21-.21-.49l.32-.14q.13-.05.24-.02.12.02.17.12.05.1.12.2.06.11.15.19.09.07.21.12.12.05.29.05.19 0 .33-.06t.24-.16q.09-.1.14-.22.05-.12.05-.24 0-.16-.04-.29-.03-.12-.14-.21-.1-.09-.3-.15-.19-.05-.52-.05v-.52q.27-.01.45-.06.18-.04.29-.13.1-.08.14-.2.05-.12.05-.27 0-.3-.17-.46-.18-.16-.46-.16-.13 0-.24.04-.11.03-.2.1-.09.07-.15.16t-.09.2q-.05.13-.14.18-.08.04-.23.02Zm4.6 2.37h1.11q.12 0 .19.07.07.06.07.18v.44h-2.97v-.25q0-.07.03-.15.03-.09.1-.15l1.32-1.32q.16-.17.29-.32.13-.16.22-.31t.13-.3q.05-.16.05-.33 0-.15-.05-.27-.04-.12-.12-.2-.09-.08-.2-.12-.12-.04-.26-.04-.13 0-.25.04-.11.03-.2.1-.08.07-.14.16-.06.09-.09.2-.05.13-.13.18-.09.04-.24.02l-.39-.07q.05-.31.18-.55.12-.23.32-.39.19-.16.44-.24.25-.08.54-.08.3 0 .55.09.25.09.43.25.17.16.27.39t.1.51q0 .24-.07.44-.07.21-.19.39-.12.19-.28.36-.16.18-.33.36l-.98 1q.14-.05.28-.07.14-.02.27-.02Z"/></svg>`}
      title="Title"
      description="Description"
      value="Value"
      extra="Extra"
    />,
  ],
};
